<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>我的收藏</title>
    <link rel="stylesheet" th:href="@{/css/index.css}"/>
    <link rel="stylesheet" th:href="@{/css/pintuer.css}">
    <link rel="stylesheet" th:href="@{/css/jquery-confirm.min.css}">
    <link rel="stylesheet" th:href="@{/css/admin.css}">
    <script type="application/javascript" th:src="@{/js/jquery-3.5.1.js}"></script>
    <script>
        var cancel;
        $(document).ready(function () {
            cancel=function (id) {
                $.get('/favor/del/'+id,function (data) {
                    if (data.code===0){
                        alert("取消收藏成功")
                        window.location.href="/user/toMyFavor"
                    }else {
                        alert("失败")
                    }
                })
            }
        })
    </script>
</head>
<body>
<div
        class="v3-app-layout layoutstatus-header--Normal layoutstatus-side--Hidden limitWidth">
    <div th:replace="header :: #header"></div>
    <div class="v3-app-layout__content">
        <div class="UserCenter">
            <div class="UserCenter__tab">
                <h4 class="UserCenter__tab-title">个人中心</h4>
                <div th:replace="left :: #left"></div>
            </div>
            <div class="UserCenter__content">
                <div class="UserCenter__setting">
                    <div class="compoent-sortTabs__container UserCenter__Setting__tab">
                        <div class="compoent-sortTabs__tabItemWrapper first">
                            <div class="compoent-sortTabs__tabItem active first">
                                <span>我的视频</span>
                                <div class="ink"></div>
                            </div>
                        </div>
                        <div class="compoent-sortTabs__appendNode"></div>
                    </div>

                    <div class="UserCenter__setting__content">
                        <div class="UserCenter__profile">
                            <div class="UserCenter__profile__title">我的视频</div>
                            <div class="UserCenter__profile__content">
                                <div class="UserCenter__profile__right">
                                    <div class="UserCenter__profile__item">
                                        <div class="FeedContainer__items">
                                            <th:block th:each="video,index:${videos}">
                                                <div class="FeedContainer__itemWrapper">
                                                    <div class="VerticalFeedCard VerticalChannelBlockList__item">
                                                        <a class="VerticalFeedCard__coverWrapper" th:title="${video.title}"
                                                           th:href="'/video/view/'+${video.id}" target="_blank"
                                                           data-disable_default="true">
                                                            <picture>
                                                                <source srcSet="" type="image/webp"/>
                                                                <img class="BU-MagicImage"
                                                                     style="width: 100%; height: 100%; transition: transform 0.3s; object-fit: cover"
                                                                     th:src="${video.cover}" alt=""/></picture>
                                                        </a><a class="VerticalFeedCard__title" title="" href=""
                                                               target="_blank" data-disable_default="true"
                                                               th:text="${video.title}"></a>
                                                        <button class="button border-red icon-delete" th:onclick="'cancel('+${video.id}+')'">取消收藏</button>
                                                    </div>

                                                </div>
                                                <br th:if="${index.count} mod 3==0"/>
                                            </th:block>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>